<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <canvas id="arc" width="500" height="500" style="border: 2px solid #00f;"></canvas>
  <canvas id="arc2" width="500" height="500" style="border: 2px solid #00f;"></canvas>
  <script src="../utils/index.js"></script>
  <script>
    const canvas = document.getElementById('arc')
    const ctx = canvas.getContext('2d')

    let xStep = 2
    let yStep = 4
    let r = 20
    let x = 40
    let y = 40
    const timerId = setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      if (x - r <= 0 || x + r >= 500) {
        xStep = -xStep
      }
      x += xStep
      if (y - r <= 0 || y + r >= 500) {
        yStep = -yStep
      }
      y += yStep
      drawBall(x, y, r)
    }, 1);

    function drawBall(x, y, r) {
      ctx.beginPath()
      ctx.arc(x, y, r, 0, Math.PI * 2, false)
      ctx.fillStyle = '#f00'
      ctx.fill()
    }
    setTimeout(() => {
      clearInterval(timerId)
    }, 60 * 1000);
  </script>

  <script>
    const canvas2 = document.getElementById('arc2')
    const ctx2 = canvas2.getContext('2d')

    drawCircle(0, (Math.PI * 2) * 1 / 10)
    drawCircle((Math.PI * 2) * 1 / 10, (Math.PI * 2) * 3 / 10)
    drawCircle((Math.PI * 2) * 3 / 10, (Math.PI * 2) * 4 / 10)
    drawCircle((Math.PI * 2) * 4 / 10, (Math.PI * 2) * 7 / 10)
    drawCircle((Math.PI * 2) * 7 / 10, (Math.PI * 2) * 10 / 10)

    function drawCircle(start, end) {
      ctx2.beginPath()
      ctx2.moveTo(250, 250)
      ctx2.arc(250, 250, 100, start, end)
      ctx2.fillStyle = Lrt.randomColor1()
      ctx2.fill()
    }
  </script>
</body>

</html>